<template>
	<view class="main-cont">
		<view class="main-top box box-pack-between box-align-center padd20">
			<view class="box box-tb box-pack-start box-align-start">
				<view class="title">
					{{rwinfo.title}}
				</view>
<!-- 				<view class="limit-time mt10">
					截止日期：{{rwinfo.endTime}}
				</view> -->
			</view>
		</view>
		<view class="padd20 detail">
			<u-read-more ref="uReadMore" :toggle="true" show-height="400" close-text="展开详情">
				<view class="mb20" v-if="rwinfo.videoUrl !=null">
					<view class="tip">
						实践视频
					</view>
					<view class="cont video-cont">
						<video class="video" :src="rwinfo.videoUrl" controls></video>
					</view>
				</view>
				<view class="mb20" v-if="rwinfo.ldmb !=''">
					<view class="tip">
						劳动目标
					</view>
					<view class="cont padd20" v-html="rwinfo.ldmb">
					</view>
				</view>
				<view class="mb20" v-if="rwinfo.csygj !=''">
					<view class="tip">
						场所与工具
					</view>
					<view class="cont padd20" v-html="rwinfo.csygj">
					</view>
				</view>
				<view class="mb20" v-if="rwinfo.aqygz !=''">
					<view class="tip">
						劳动安全及规则
					</view>
					<view class="cont padd20" v-html="rwinfo.aqygz">
					</view>
				</view>
				<view class="mb20" v-if="rwinfo.zzzb !=''">
					<view class="tip">
						组织准备
					</view>
					<view class="cont padd20" v-html="rwinfo.zzzb">
					</view>
				</view>
				<view class="mb20" v-if="rwinfo.jtly !=''">
					<view class="tip">
						具体流程
					</view>
					<view class="cont padd20" v-html="rwinfo.jtly">
					</view>
				</view>
			</u-read-more>
		</view>

		<view class="padd20 stu-cont">
			<view class="top box box-align-center box-pack-between">
				<view class="">
					已完成：{{stuSjList.length}}人
				</view>
				<view class="">
					按时间
				</view>
			</view>
			<view class="" v-if="stuSjList.length !=0">
				<view class="bottom box box-tb box-pack-start" v-for="(item,i) in stuSjList" :key="i" >
						<view class="box box-pack-between box-align-center">
							<view class="stu-info box box-pack-start box-align-center">
								<u-avatar :src="item.icon" mode="square" size="78"></u-avatar>
								<view class="box box-tb box-pack-start ml10">
									<view class="stu-name">
										{{item.name}}
									</view>
									<view class="time">
										{{item.createTime}}
									</view>
								</view>
							</view>
							<view class="score">
								+ {{item.score!=null?item.score:0}}分
							</view>
						</view>
						<view class="content">
							<view class="text">
								{{item.cont}}
							</view>
							<view class="images box box-align-start">
								<view class="item mr10" v-for="(ite,index) in item.stuCont" :key="index" @click="previewImage(item.stuCont,index)">
									<u-image :src="ite.videoImg" width="152rpx" height="152rpx" v-if="ite.type == 'mp4'">
										<u-loading slot="loading"></u-loading>
									</u-image>
									<u-image :src="ite.url" width="152rpx" height="152rpx" v-else>
										<u-loading slot="loading"></u-loading>
									</u-image>
									<u-image src="@/static/home/icon_play.png" width="40rpx" height="40rpx" class="posa" v-if="ite.type =='mp4'">
										<u-loading slot="loading"></u-loading>
									</u-image>
								</view>
							</view>
							<!-- <view class="pingyu" style="margin-left: 96rpx;">
								评语：{{item.comment!=null?item.comment:'暂无评语'}}
							</view> -->
						</view>
					</view>
				</view>
				<view class="box box-align-center box-pack-center" style="height: 80rpx;" v-else>
					暂无数据
				</view>
			</view>
			
		<view class="py box box-align-center box-pack-center" v-if="wpynum!=0">
			<view class="btn" @click="goPy()">
				批阅
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sjId: '',
				planid:'',
				classid:'',
				rwinfo:{
					title:'',
					endTime:''
				},
				stuSjList:[],
				wpynum:0
			}
		},
		onLoad(opt) {
			//console.log(opt);
			this.sjId = opt.id
			this.planid = opt.planid
			this.classid = opt.classid!=`null`?opt.classid:''
			this.setTitle();
			
			this.getLdsjInfo();
			this.getRwWpyNum();
			// this.wpynum = opt.wpynum;
		},
		methods: {
			getLdsjInfo(){
				let params = {
					sjid:this.sjId,
					planid:this.planid,
					classid:this.classid
				};
				//console.log(">>>>>>")
				this.$api.post({url: '/yclassldsjtask/getLdsjInfo'}, params).then(res => {
					//console.log(res);
					this.rwinfo = res.rwinfo;
					this.stuSjList = res.list;
				})
			},
			getRwWpyNum(){
				let params = {
					sjid:this.sjId,
					planid:this.planid,
					classid:this.classid
				};
				this.$api.post({url: '/yclassldsjtask/getRwWpyNum'}, params).then(res => {
					//console.log(res);
					this.wpynum = res.num;
				})
			},
			setTitle() {
				uni.setNavigationBarColor({
					frontColor: '#ffffff',
					backgroundColor: '#7686F6'
				})
			},
			goStuSort(item) {
				uni.navigateTo({
					url: '/pageHome/stuSort'
				})
			},
			goPy() {
				uni.navigateTo({
					url: '/pageHome/pyList?planid='+this.planid+'&sjid='+this.sjId
				})
			},
			previewImage(val,i) {
				if(val[i].type == `mp4`){
					uni.navigateTo({
						url: `/pageHome/video?url=` + val[i].url
					})
				}else{
					let it = JSON.stringify(val)
					uni.setStorage({
						key: 'item',
						data: it
					})
					uni.navigateTo({
						url: `/stupageHome/showFile?index=` + i + `&val=` + encodeURIComponent(it)
					})
				}
			},

		}
	}
</script>

<style scoped lang="scss">
	.main-cont {
		height: 100%;

		.main-top {
			width: 100%;
			height: 185rpx;
			background-color: #7686F6;

			.title {
				font-size: 32rpx;
				color: #fff;
			}

			.limit-time {
				font-size: 22rpx;
				color: #fff;
			}

			.sort {
				width: 132rpx;
				height: 48rpx;
				background: #FEAA19;
				border-radius: 24rpx;
				color: #fff;
			}
		}



	}

	.detail {
		box-sizing: border-box;
		width: 722rpx;
		margin: -30rpx auto 20rpx;
		background: #FFFFFF;
		box-shadow: 0px 23px 46px 0px rgba(205, 207, 230, 0.18);
		border-radius: 20rpx;
	}

	.tip {
		text-align: center;
		width: 215rpx;
		height: 78rpx;
		line-height: 120rpx;
		font-size: 28rpx;
		border-bottom: 19rpx solid #FEB7AB;
		font-weight: bold;
	}

	.cont {
		margin-top: 20rpx;
		background: #F8F9FC;
		border-radius: 10rpx;
	}

	.stu-cont {
		width: 722rpx;
		background-color: #fff;
		border-radius: 20px;
		padding-bottom: 130rpx;

		.top {
			height: 80rpx;
			border-bottom: 2rpx solid #F0F1F8;
		}

		.bottom {
			margin-top: 40rpx;

			.text {
				margin-left: 96rpx;
			}

			.stu-name {
				color: #2F3142;
				font-size: 30rpx;
			}

			.time {
				color: #ABB0C4;
				font-size: 24rpx;
			}

			.score {
				color: #FF5A77;
				font-size: 30rpx;
			}

			.images {
				flex-wrap: wrap;
				margin-left: 96rpx;

				.item {
					position: relative;
					margin-bottom: 20rpx;

					.posa {
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
					}
				}
			}

		}
	}
	.py {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 130rpx;
		background-color: rgba(255,255,255,.9);
		
		.btn {
			text-align: center;
			width: 318rpx;
			height: 72rpx;
			line-height: 72rpx;
			background: linear-gradient(180deg, #FF929D, #FF5A77);
			border-radius: 31rpx;
			font-size: 30rpx;
			color: #fff;
		}
	}
</style>
